<template>
	<view class="content">
		<!-- 登录页面 -->
		<view class="title">
			验证码登录
		</view>

		<view class="item">
			<text>手机号：</text><input class="inp" type="text" v-model="phoneNumber" value="" placeholder="请输入手机号" />
		</view>

		<view class="item">
			<text>验证码：</text>
			<view class="phonecode">
				<input class="inp" type="text" v-model="code" placeholder="请输入验证码" />
				<button class="button-phone" type="primary" style="background-color: #58f;"
					@click="getphonecode">获取验证码</button>
			</view>
		</view>


		<button type="primary" v-on:click="login" class="btn" style="background-color: #58f">登录</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 60rpx;

		.title {
			font-size: 60rpx;
			color: #0f80ff;
			margin: 100rpx 0;

		}

		.inp {
			background-color: #f7f7f7;
			height: 100rpx;
			border-radius: 20rpx;
			padding-left: 20rpx;
			margin-bottom: 40rpx;
		}
		.phonecode {
			display: flex;
			justify-content: space-around;
		}

		.item {
			.pass {

				display: flex;
				justify-content: space-between;
			}

			.eye {
				margin-top: 30rpx;
				margin-right: 30rpx;
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				flex-shrink: 0;
				align-items: center;
			}

			.button-phone {
				height: 100rpx;
				// width: 150rpx;
			}
		}
	}
</style>